<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建阶段</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/VUE/vue2.js"></script>
</head>
<body>
<div id="box">
    {{ myname }}
<!--    <img src="/images/lifecycle.png" alt="">-->
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            myname:"最爱吃兽奶"
        },
        beforeCreate(){
            console.log("beforeCreate",this.myname)    // 一般不用，拦截不到任何东西
        },
        created(){
            console.log("created","初始化状态或者挂载到当前实例的一些属性")
            this.myname = this.myname + "111111"   // 被拦截的状态
            this.localStorage = "this可以直接访问的属性"   // this下面的属性
            console.log("created",this.localStorage)
        },

        beforeMount(){
            // 模板解析前最后一次修改模板节点,一般也不用
            console.log("beforeMount",this.$el)
        },
        mounted(){
            console.log("mounted","可以拿到真实的dom节点",document.getElementById("box").innerHTML)
            // 依赖于dom创建之后，才进行初始化工作的插件  (轮播插件)
            // 订阅 bus.$on
            // 发 ajax   -> 虽然在这之前都可以发送数据请求，不过一般都默认选择在此处ajax
        }


    })
</script>
</body>
</html>